<script setup lang='ts'>
import {Server} from '../stores/ajax';
import type {Sources} from 'quill';
import {Quill, ImageUploaderMoudel} from '@/quillConfig';
import {Delta, QuillEditor} from '@vueup/vue-quill'
import BlotFormatter from 'quill-blot-formatter'
import MarkdownShortcuts from 'quill-markdown-shortcuts';

const modules = $ref([
    {
        name: 'MarkdownShortcuts',
        module: MarkdownShortcuts,
        // options: {/* options */}
    },
    ImageUploaderMoudel,
])


const props = defineProps({content: Delta, maxWordsLength: Number, placeholder: String})
let onEditorChange = (event: any) => {
    // console.log(ref)
    if (props.maxWordsLength) {
        ref.getQuill().deleteText(props.maxWordsLength, 4)
    }
    wordsLength = ref.getQuill().getLength() - 1
}

let wordsLength = $ref(0)
let ref = $ref<any>() // return the refence to upper components.
</script>
<template>
    <div style="width: 100%;height: calc(100% - 44px);">
        <QuillEditor ref="ref" :modules="modules"
            theme="snow" v-model:content="content"
            content-type="delta"
            :toolbar="[['image'], ['emoji']]"
            style="margin-bottom: 100px"
            :placeholder="placeholder"
            @textChange="$emit('textChange', $event)"
            @ready="$emit('ready', ref)"
            @editor-change="onEditorChange" />

        <div v-if="maxWordsLength" class="word-length"
            :class="maxWordsLength == wordsLength ? 'full' : ''">
            {{
                    maxWordsLength - wordsLength
            }}</div>
    </div>
</template>
<style scoped lang="scss">
.word-length {
    font-size: 14px;
    color: #999999;
    float: right;
    margin-top: -130px;
    margin-right: 10px;
}

.full {
    color: #f44;
}
</style>
<style lang="scss">
.ql-container {

    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
    ::-webkit-scrollbar {
        width: 7px;
        height: 7px;
        background-color: #f5f5f5;
    }

    /*定义滚动条轨道 内阴影+圆角*/
    ::-webkit-scrollbar-track {
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.05);
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.05);
        border-radius: 10px;
        background-color: #f5f5f5;
    }

    /*定义滑块 内阴影+圆角*/
    ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #c8c8c8;
    }
}
</style>
